/* 
  要在 cart.vue 页面中设置购物车的数字徽标，还需要在其它 3 个 tabBar 页面中，为购物车设置数字徽标。
  此时可以使用 Vue 提供的 mixins 特性，提高代码的可维护性。
*/

import { mapGetters } from 'vuex'

// 导出一个 mixin 对象
export default {
  computed: {
    ...mapGetters('m_cart', ['total', 'checkedCount']),
  },
  watch: {
    checkedCount: {
      immediate: true, // 不用钩子函数用监听器，保证实时更新
      handler: function(){
        this.setBadge()
      }
    }
  },
  onShow() { // 生命周期钩子不会覆盖，且被混入的先执行，优先级较低
    // 在页面刚展示的时候，设置数字徽标
    this.setBadge()
  },
  methods: {
    setBadge() {  // methods方法会覆盖，以实例中的为主，被混入的会被实例自带的覆盖
      // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
      if(this.checkedCount !== 0){
        uni.setTabBarBadge({
          index: 2,
          text: this.checkedCount + '', // 注意：text 的值必须是字符串，不能是数字
        })
      }else{
        uni.hideTabBarRedDot({ //隐藏红点
          index: 2
        });
      }
    },
  },
}